<template>
    <div class="myAdd">
        <ul>
            <li v-for="item in val" :key="item" :class="activeClass == item ? 'active':''" @mouseover="mouseover($event,item)">
                <router-link to>
                    <slot :name="item"></slot>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {  
  props: ["val"],
  data() {
    return {
      activeClass: 1
    };
  },
  methods: {
    mouseover(e, val) {
      this.activeClass = val;
    }
  },
  watch: {
    activeClass: function(val) {
      this.$emit("child", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.myAdd li {
  float: left;
  margin-left: 30px;
}
.myAdd a:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
.myAdd .active a {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>